<template>
  <div class="teacherCourseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程教学大纲</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <div class="table-title-before"></div>
      <el-button-group style="margin-bottom:4px;" class="float-right">
        <el-button type="primary" class="add-pd-26" @click.native.prevent="toAdd()">新增</el-button>
        <el-button type="primary" class="add-pd-26">打印</el-button>
      </el-button-group>
    </div>
    <el-table
      :data="courseInfo"
      style="width: 100%"
      :default-sort="{prop: 'courseID',order:'ascending'}">
      <el-table-column
        prop="courseID"
        label="课程编号"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        label="课程名称"
        prop="courseName"
        min-width="146"
        sortable>
      </el-table-column>
      <el-table-column
        prop="programName"
        label="课程大纲"
        min-width="140">
        <template scope="scope">
          <el-button @click.native.prevent="toTPI(scope.row.programURL)" type="text">
            {{scope.row.programName}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="time"
        label="修订时间"
        min-width="146"
        sortable>
      </el-table-column>
      <el-table-column
        prop="revised"
        label="修订人"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="isUse"
        label="是否在用"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="140">
        <template scope="scope">
          <el-button type="text">下载</el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index,courseInfo,scope.row.teachingProgramID)"
            type="text">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'teachingProgramInfo',
    data() {
      return {
        form: {
          courseName: '',
          newCourseName: ''
        },
        fileList: [],
        courseInfo: [],
        courseID:'',
        url: 'http://localhost:8080/TeachingMIS'
      }
    },
    created () {
      this.res()
    },
    methods: {
	  toAdd(){
    		var courseID = this.$route.query.courseID;
    		this.$router.push({path: 'NewTeachingProgram', query: {courseID: courseID}})
      },
      res: function () {
        var courseID = this.$route.query.courseID;
        console.log(courseID)
        this.$http.post(`${this.url}/teachingProgram/teachingProgramList`,{
          courseID: courseID
        })
          .then((res) => {
            this.courseInfo = res.body.programList
          }, (err) => {
            console.log('服务器异常')
          })
      },
      toTPI(programURL){
        window.open(`${this.url}/${programURL}`)
      },
      deleteRow(index, rows, courseID) {
        rows.splice(index, 1)
        this.deleteTPI(courseID)
      },
      deleteTPI(teachingProgramID){
        this.$http.post(`${this.url}/teachingProgram/deleteProgram`, {
          teachingProgramID: teachingProgramID
        })
          .then((res) => {
            console.log('删除成功')
          }, (err) => {
            console, log('服务器异常')
          })
      }
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
